//colors
$color_alabaster_approx: #fbfbfb;
$red: red;
$white: #fff;
$color_celeste_approx: #ccc;


.place-div {
	label {
		font-weight: 400;
		font-size: 1.4rem;
	}
	input[type=checkbox] {
		margin-right: .3rem;
	}
	.checkbtn {
		background-color: $color_alabaster_approx;
		text-align: right;
		img {
			height: 10px;
			margin-left: 3px;
		}
		.ri {
			border-right: none;
		}
		a {
			height: 30px;
			line-height: 30px;
			display: inline-block;
			width: 60px;
			text-align: center;
		}
	}
	.smallplace {
		.ratio {
			color: $red;
		}
		label {
			padding-right: 10px;
			text-align: left;
			width: auto;
			float: left;
			cursor: pointer;
		}
		.citys {
			width: auto;
			background-color: $white;
			position: absolute;
			top: 35px;
			border: 1px solid $color_celeste_approx;
			z-index: 100;
			visibility: hidden;
			.row-div {
				min-width: 250px;
				padding: 10px;
				//Instead of the line below you could use @include box-sizing($bs)
				box-sizing: border-box;
				label span {
					max-width: 175px;
					white-space: nowrap;
					vertical-align: middle;
					font-size: 1.4rem;
				}
			}
			> i.jt {
				width: 0;
				height: 0;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				border-bottom: 10px solid $color_celeste_approx;
				position: absolute;
				top: -10px;
				left: 20px;
				i {
					width: 0;
					height: 0;
					border-left: 8px solid transparent;
					border-right: 8px solid transparent;
					border-bottom: 10px solid $white;
					position: absolute;
					top: 2px;
					left: -8px;
				}
			}
		}
		p {
			float: left;
			width: auto;
			margin: 2px 0;
		}
		> div {
			float: left;
			width: 170px;
			margin: 0;
			padding-bottom: 10px;
            padding-top: 5px;
            position: relative;
		}
		.place-tooltips:hover .citys {
			visibility: visible;
		}
	}
}
.show-place-div {
	margin-left: 85px;
	font-size: 15px;
	.smallplace {
		label {
			min-width: 105px;
			width: auto;
		}
		input {
			margin-left: 0;
		}
		.citys .row-div p {
			margin: 5px 0 10px;
		}
	}
}

.clearfloat {
    zoom: 1; 
    &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0; 
    }
}

.tree-item {
	text-align: left;
}

.product-box {
    .input-group {
        input[type="text"],
        input[type="number"], {
            min-width: 0;
            width: 100px;
        }
    }
    input[type="text"],
    input[type="number"], {
        min-width: 0;
        width: 100px;
    }
}



.form-table {
    .input-group {
        .add-box {
            display: inline-block;
            input {
                min-width: 0;
                width: 100px;
            }
            .btn {
                margin: 0;
            }
        }
    }
    .attr-box {
        .input-group {
            input {
                min-width: 0;
            }
        }
        .check-label {
            margin-right: 8px;
            position: relative;
            label {
                padding-right: 0;
            }
            input {
                width: 60px;
                text-align: center;
                background: rgba($color: #fff, $alpha: .3);
                border: none;
                border-bottom: 1px solid;
                color: #fff;
            }
            .fa-remove {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
                position: absolute;
                display: block;
                cursor: pointer;
                text-align: center;
                background: #ababab;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                line-height: 20px;
                top: -9px;
				right: -9px;
				&::before {
					content: "\f00d";
				}
            }
            &.attr-block {
                .fa-remove {
                    top: 0;
                    right: 0px;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                }
            }
        }
    }
}


.attr-block {
    display: block;
}

.mix-item {
	text-align: left;
}
.step-item {
	input[type="text"] {
		min-width: auto !important;
	}
}

.product-table,
.regional-table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    td,
    th {
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
	}
	tfoot {
		td {
			text-align: left;
		}
	}
}

.regional-table {
    input {
        display: block;
        width: 100%;
        padding: 6px 5px;
        line-height: 1.42857;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
        border: 0;
        border-bottom: 1px solid #c2cad8;
        color: #555;
        box-shadow: none;
        font-size: 14px;
    }
}

.toggle-box {
	cursor: pointer;
	.fa {
		&::before {
			content: "\f00d";
		}
	}
	&.active {
		color: #f00;
		.fa {
			&::before {
				content: "\f00c";
			}
		}
	}
}

.order-item {
	margin-bottom: 20px;
	.item-header {
		line-height: 40px;
		span {
			margin-right: 20px;
		}
	}
	.item-body {
		background-color: #fff;
		display: grid;
		grid-template-columns: 1fr 120px 200px 120px;
		.goods-item {
			display: grid;
			grid-template-columns: 70px 1fr;
			.goods-img {
				img {
					width: 70px;
					height: 70px;
				}
			}
		}
	}
	.item-subtotal,
	.item-actions,
	.item-user {
		padding-top: 10px;
	}
	.item-actions {
		text-align: center;
		a {
			display: block;
			&.btn-danger {
				color: #f00;
			}
		}
	}
}

.order-box {

}

.progress-bar {
	width: 80%;
    height: 50px;
    position: relative;
	margin: 30px 0 0 100px;
	div {
		width: 100%;
		height: 10px;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top:-20px;
		border:1px solid #ddd;
		background: #ccc;
		span {
			position: absolute;
			display: inline-block;
			background: green;
			height: 10px;
			width: 25%;
		}
	}
	>span {
		position: absolute;
		top:0;
		margin-top: -10px;
		width: 40px;
		height: 40px;
		border:2px solid #ddd;
		border-radius: 50%;
		background:#ccc;
		margin-left: -20px;
		color:#333;
		font-size: 12px;
		line-height: 35px;
		i {
			color: #000;
			font-style: normal;
			width: 120px;
			position: absolute;
			left: -40px;
			top: 30px;
		}
		&:nth-child(1){
			left: 0%;
		}
		&:nth-child(2){
			left: 0%;
		}
		&:nth-child(3){
			left: 25%;
		}
		&:nth-child(4){
			left: 50%;
		}
		&:nth-child(5){
			left: 75%;
		}
		&:nth-child(6){
			left: 100%;
		}
		&.active {
			background:green;
			color: #fff;
		}
	}
}

.pull-right {
	float: right;
}

.panel {
	margin-top: 20px;
	.panel-header {
		line-height: 40px;
		background-color: #fff;
		padding: 0 10px;
	}
	.panel-body {
		padding: 10px;
	}
}

.text-right {
	text-align: right;
}

.table-left {
	td,
	th {
		text-align: left;
	}
}

.remark-box {
	textarea {
		width: 100%;
		min-height: 100px;
	}
}

.multi-image-box {
	border: 1px dotted;
	padding: 5px;
	.image-item {
		display: inline-block;
		position: relative;
		background-color: #fff;
		.fa {
			position: absolute;
			top: 0;
			right: 0;
			background: rgba(#333, .2);
			border-radius: 50%;
			display: block;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
		}
		img {
			width: 120px;
			height: 120px;
		}
		&:hover {
			border: 1px solid rgb(240, 143, 143);
		}
	}
	.add-item {
		display: inline-block;
		width: 120px;
		height: 120px;
		border: 1px solid rgb(106, 241, 101);
		text-align: center;
		font-size: 80px;
		vertical-align: top;
	}
}

table {
	.goods-info {
		text-align: left;
		.thumb {
			float: left;
		}
	}
	.btn-group {
		text-align: right;
	}
}

.option-box {
	display: grid;
	grid-template-columns: 150px 1fr;
	.zd-tab-head,
	.tab-header {
		border-right: 1px dotted #767676;
		box-sizing: border-box;
		.zd-tab-item,
		.tab-item {
			width: 100%;
		}
	}
	.input-group {
		.fa-edit {
			display: none;
		}
		&:hover {
			.fa-edit {
				display: inline-block;
			}
		}
	}
}

.dialog.dialog-box.option-dialog {
	width: 300px;
	.dialog-footer {
		.dialog-del {
			background-color: #d9534f;
			padding: 3px;
			border: none;
			margin-right: 5px;
			width: 30%;
		}
	}
	
}


.plus-table {
	width: auto;
	td {
		input[type="text"] {
			min-width: 60px !important;
			width: 60px;
			text-align: center;
		}
		.fa-times {
			display: block;
			width: 30px;
			line-height: 30px;
		}
	}
	tfoot {
		background-color: #fff;
		.fa {
			display: block;
			line-height: 30px;		
		}
	}
}

#goods-dialog {
	.dialog-body {
		overflow: unset;
	}
}

.dialog-goods-box {
	overflow-y: auto;
	background-color: #eee;
	max-width: 600px;
	max-height: 400px;
	.item {
		text-align: center;
		display: inline-block;
		background-color: #fff;
		margin: 3px;
		position: relative;
		.thumb {
			width: 100px;
			height: 100px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			width: 100px;
			overflow: hidden;
			color: #333;
			font-size: 12px;
			height: 16px;
		}
		.price {
			color: #f00;
		}
		&.selected {
			background-color: rgb(174, 255, 238);
			&::after {
				position: absolute;
				font-size: 100px;
				color: rgba(red, .3);
				font-family: "Font Awesome 5 Free";
				content: "\f00c";
				font-weight: 900;
				top: 10px;
				left: 0;
			}
		}
	}
	.dialog-pager {
		text-align: center;
	}
}
.images-dialog {
	.dialog-body {
		padding: 0 !important;
		height: 300px;
		overflow-y: auto;
		.img-item {
			display: inline-block;
			cursor: pointer;
			img {
				width: 113px;
				height: 113px;
			}
			&:hover {
				box-shadow: rgba(51, 51, 51, 0.7) 0 0 10px;
			}
			&.selected {
				border: 2px solid #0f0;
			}
		}
	}
}